<template>
	<view class="upload-auth-main">
		<view class="top-tips">
			<text class="t1 iconZp-lingdang iconfontPT"></text>
			<text class="t2">请确保提交的认证资料的真实性，否则您可能将承担相应的违法违规责任。</text>
		</view>
		<view class="img-main">
			<view class="img-box">
				<view class="border-box left-top"></view>
				<view class="border-box right-top"></view>
				<view class="border-box left-bottom"></view>
				<view class="border-box right-bottom"></view>
				<image v-if='detail.empower_img' :src="`${host}/${detail.empower_img}`"></image>
				<image v-else src="/static/images/authorization.jpg"></image>
				<button v-if="detail.state != 1 && detail.state != 3" class="upload-btn" @click="chooseImageFn" data-key="empower_img"><text
					 class="iconfontPT iconZp-paizhaoshangchuan"></text> 上传授权书</button>
			</view>
			<view class="img-txt-box">
				<view class="tit">注意事项</view>
				<view class="txt">1.请不要上传电子文档版/扫描版/截屏版申请书；</view>
				<view class="txt">2.申请书需要加盖公司公章或人事公章，落款日期在<text class="checked"> 7日 </text>以内；</view>
				<view class="txt">3.不支持帮被人代申请；</view>
			</view>
		</view>
		<view class="img-main">
			<view class="img-box">
				<view class="border-box left-top"></view>
				<view class="border-box right-top"></view>
				<view class="border-box left-bottom"></view>
				<view class="border-box right-bottom"></view>
				<image v-if='detail.yyzz_img' :src="`${host}/${detail.yyzz_img}`"></image>
				<image v-else src="/static/images/business_license.png"></image>
				<button v-if="detail.state != 1 && detail.state != 3" class="upload-btn" @click="chooseImageFn" data-key="yyzz_img"><text
					 class="iconfontPT iconZp-paizhaoshangchuan"></text> 上传营业执照</button>
			</view>
			<view class="img-txt-box">
				<view class="tit">注意事项</view>
				<view class="txt">1.拍摄于所填<text class="checked"> 公司全称一致 </text>的营业执照上传</view>
				<view class="txt">2.核准日期为<text class="checked"> 最新</text></view>
				<view class="txt">3.公章<text class="checked"> 清晰可辨</text></view>
			</view>
		</view>
		<image-compress style="position: absolute; top: 0rpx; overflow: hidden;" ref='imageCompress' />
		<btnTpl v-if="detail.state != 1 && detail.state != 3" @confirmEvent="checkThreeLevelFn">提交</btnTpl>
	</view>
</template>

<script>
	import {
		upAuthenticationSrv
	} from '../../../apis/recruit/index.js'
	import btnTpl from '../../components/recruit/btn-tpl.vue'
	import {
		base
	} from '../../../setting.js'

	export default {
		data() {
			return {
				detail: {
					empower_img: "",
					yyzz_img: ''
				}
			}
		},
		onLoad(options) {
			this.detail = uni.getStorageSync('authentication')
		},
		components: {
			btnTpl
		},
		computed: {
			host() {
				return this.$baseHost.car
			}
		},
		methods: {
			checkThreeLevelFn() {
				let params = this.detail
				delete params.state
				upAuthenticationSrv(params).then(res => {
					if (res.code == 1) {
						uni.navigateBack({
							delta: 1 // delta: 1返回上一级（A 页面）    delta: 2返回上两级
						})
					}
				})
			},
			/**
			 * 选择图片上传
			 */
			chooseImageFn(e) {
				let _this = this,
					key = e.currentTarget.dataset.key;
				_this.$loading.show()
				this.$uploadImage({
						imageCompressFn: this.$refs.imageCompress.start
					})
					.then(response => {
						_this.detail[key] = response
						_this.$loading.hide()
					})
			},
		}
	}
</script>

<style lang="less">
	.upload-auth-main {
		padding: 210rpx 0;
	}

	.top-tips {
		padding: 20rpx 75rpx 20rpx 30rpx;
		color: #FDB141;
		background: #FFF6EF;
		font-size: 30rpx;
		font-weight: bold;
		height: 80rpx;
		overflow: hidden;
		letter-spacing: 2rpx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 5;

		text {
			display: inline-block;
			vertical-align: top;
		}
	}

	.t1 {
		font-size: 40rpx;
		line-height: 80rpx;
	}

	.t2 {
		padding-left: 30rpx;
		width: calc(100% - 90rpx);
		height: 80rpx;
	}

	.img-main {
		margin-top: 30rpx;
		padding: 0 30rpx;
	}

	.img-box {
		background: #FFE7E5;
		margin: 0 auto;
		width: 54vw;
		height: 70vw;
		position: relative;

		image {
			width: calc(100% - 100rpx);
			height: calc(100% - 100rpx);
			background: #fff;
			margin: 50rpx;
		}

		.upload-btn {
			background: #E41805;
			border-radius: 36rpx;
			width: calc(100% - 52rpx);
			height: 72rpx;
			font-size: 34rpx;
			color: #fff;
			font-weight: bold;
			line-height: 70rpx;
			position: absolute;
			margin: auto;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;

			.iconfontPT {
				margin-right: 16rpx;
				font-weight: 400;
			}
		}

	}

	.border-box {
		width: 19rpx;
		height: 19rpx;
		border: 3rpx solid #E41805;
		position: absolute;

		&.left-top {
			border-width: 3rpx 0 0 3rpx;
			left: 24rpx;
			top: 24rpx;
		}

		&.right-top {
			border-width: 3rpx 3rpx 0 0;
			right: 24rpx;
			top: 24rpx;
		}

		&.left-bottom {
			border-width: 0 0 3rpx 3rpx;
			left: 24rpx;
			bottom: 24rpx;
		}

		&.right-bottom {
			border-width: 0 3rpx 3rpx 0;
			right: 24rpx;
			bottom: 24rpx;
		}
	}

	.img-txt-box {
		margin-top: 30rpx;
		font-size: 24rpx;
		color: #666;
		line-height: 40rpx;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #A3A3A3;

		.tit {
			color: #333;
			font-weight: bold;
			margin-bottom: 5rpx;
			margin-top: 13rpx;
		}
	}
</style>
